<template>
    <section class="wrapper">
        <div class="title">查看详情</div>
        <el-table
            :data="data"
            max-height="400"
            class="data-table"
        >
            <el-table-column
                label="商品规格"
                show-overflow-tooltip
                width="180"
            >
                <template slot-scope="scope">
                    {{ scope.row.spec_list | filterSpec }}
                </template>
            </el-table-column>
            <el-table-column
                label="学生价"
                align="center"
                :formatter="emptyFormatter"
            >
                <template slot-scope="scope">
                    ￥{{ scope.row.product_price }}
                </template>
            </el-table-column>
            <el-table-column
                label="活动价"
                align="center"
                :formatter="emptyFormatter"
            >
                <template slot-scope="scope">
                    ￥{{ scope.row.price }}
                </template>
            </el-table-column>
            <el-table-column
                label="活动库存"
                align="center"
                :formatter="emptyFormatter"
            >
                <template slot-scope="scope">
                    {{ scope.row.stock }}
                </template>
            </el-table-column>
        </el-table>
    </section>
</template>

<script>
export default {
    name: "SkuDetailTemplate",
    props: {
        data: {
            type: Array,
            required: true
        },
        fromType: {
            type: String,
            default: ''
        }
    },
    filters: {
        filterSpec (val) {
            if(!val) return '';
            let str = '';

            val.forEach(el => {
                str += el.spec_name + ':' + el.spec_value + '；';
            });
            return str;
        }
    },
    methods: {
        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        },
    }
};
</script>

<style scoped lang="less">
.wrapper {
    padding: 12px;
    .title {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        text-align: center;
        margin-bottom: 24px;
    }
    // 表格
    .data-table {
        border-radius: 4px;
        border: 1px solid #EEEEEE;
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
    }
    /deep/ .el-table {
        th {
            background: #FAFAFA!important;
            border-radius: 4px 4px 1px 1px;
            font-size: 14px!important;
            font-family: PingFangSC-Medium, PingFang SC!important;
            font-weight: 500!important;
            color: #333333!important;
            height: 44px!important;
        }
    }
}
</style>
